<template>
  <div class="login-container">
    <div class="title">{{ nusicName }}</div>
    <div class="login">
      <el-form :model="ruleForm" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="password" v-model="ruleForm.password"
                    @keyup.enter="submitForm"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, ref, reactive} from "vue";
import mixin from "@/mixins/mixin";
import {HttpManager} from "@/api/index";
import {RouterName, MUSICNAME} from "@/enums";

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance();
    const {routerManager} = mixin();

    const nusicName = ref(MUSICNAME);
    const ruleForm = reactive({
      username: "admin",
      password: "123",
    });
    const rules = reactive({
      username: [{required: true, message: "请输入用户名", trigger: "blur"}],
      password: [{required: true, message: "请输入密码", trigger: "blur"}],
    });

    async function submitForm() {
      let username = ruleForm.username;
      let password = ruleForm.password;
      const result = (await HttpManager.getLoginStatus({username, password})) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });

      if (result.success) routerManager(RouterName.Info, {path: RouterName.Info});
    }

    return {
      nusicName,
      ruleForm,
      rules,
      submitForm,
    };
  },
});
</script>

<style scoped>
.title {
  font-size: 30px;
  font-weight: 900; /* 字体粗细 */
  text-align: center; /* 文字居中对齐 */
  margin-bottom: 30px; /* 与 login 之间的间距 */
}

.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 垂直水平居中 */
  height: 80%; /* 让容器的高度占满整个视口 */

}

.login {
  width: 300px;
  padding: 40px 40px 20px 40px;
  border-radius: 10px; /* 圆角 */
  background-color: #a9dbf9; /* 使用指定背景色 */
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25); /* 四周发散阴影 */
}

.login-btn {
  width: 100%;
  font-size: 15px;
  margin-top: 10px; /* 减少与上方输入框的间距 */
}

</style>
